<template>
  <div id="chart">
     <div v-title>{{title}}</div>
     <div class="contain">
        <div class="contain-a">{{title}}</div>
        <div class="contain-b"></div>
        <div v-if="title=='每日收费统计表'" class="dailyMain">
       
          <yd-datetime type="date" v-model="startdate" slot="right" class="dailyStyle" :callback="changeDate"></yd-datetime>
          ~
          <yd-datetime type="date" v-model="enddate" slot="right" class="dailyStyle" :callback="changeDate"></yd-datetime>
            
        </div>
        <yd-flexbox class="dateTitle" v-if="title=='每日收费统计表'">
            <yd-flexbox-item>
                <h3>当日收入总额</h3>
                <p>{{dateincome}}</p>
            </yd-flexbox-item>
            <yd-flexbox-item style="margin-left:10px">
                <h3>当年累计收入</h3>
                <p>{{yearincome}}</p>
            </yd-flexbox-item>
        </yd-flexbox>
        <div class="chart-partOne" v-if="title=='每日收费统计表'">
          <p class="partone-title"><i class="iconfont icon-bingtu"></i>收入分析（当日：年度占比&nbsp;&nbsp;&nbsp;&nbsp;单位：万元）</p>
          <div id="main1" class="partone-content"></div>
        </div>
        <div class="chart-partOne" v-if="title=='每日收费统计表'">
          <p class="partone-title"><i class="iconfont icon-bingtu"></i>收入分析（当日：结算方式&nbsp;&nbsp;&nbsp;&nbsp;单位：万元）</p>
          <div id="main2" class="partone-content"></div>
        </div>
         <div class="chart-partOne" v-if="title=='各年度面积统计'">
           <div class="chart-year">
             <span>当前年度：</span>
             <select v-model="smsyear" v-on:change="changeyear">
               <option :value="k" v-for="(k, key) in yearnum" :key="key">{{k}}</option>
             </select>
           </div>
        </div>
         <div class="chart-partTwo" v-if="title=='每日收费统计表'">
          <p class="partone-title"><i class="iconfont icon-bar"></i>各分公司收入情况（每个柱按照当年和陈欠区分）<span class="dw">单位：万元</span></p>
          <div id="main3" class="parttwo-content"></div>
        </div>
        <div class="chart-partThree" v-if="title=='每日收费统计表'">
          <p class="partone-title"><i class="iconfont icon-bar"></i>收入分析（当月累计）  单位：万元</p>
          <div id="main4" class="partthree-content"></div>
        </div>
         <div class="chart-partFouth" v-if="title=='每日收费统计表'">
          <p class="partone-title"><i class="iconfont icon-bingtu"></i>本年收费完成率</p>
          <div id="main5" class="partfouth-content"></div>
        </div>
        <div class="chart-partFouth" v-if="title=='各年度面积统计'">
          <p class="partone-title"><i class="iconfont icon-bingtu"></i>面积类别</p>
          <div id="main6" class="partfouth-content"></div>
        </div>
        <div class="chart-partFifth" v-if="title=='各年度面积统计'">
          <p class="partone-title"><i class="iconfont icon-bar"></i>各年度面积分析（增加选项，停供面积，断网面积，拆迁面积，实供面积的年度对比）</p>
          <div id="main7" class="partfifth-content"></div>
        </div>
        <div class="chart-partThree" v-if="title=='各年度面积统计'">
          <p class="partone-title"><i class="iconfont icon-bar"></i>各所站面积分析（分部，网所，热站）<br /><br />单位：平方公里</p>
          <div id="main8" class="partfifth-content"></div>
        </div>
         <div class="chart-partThree" v-if="title=='综合信息统计表'">
          <p class="partone-title"><i class="iconfont icon-bar"></i>历史欠费分析（欠费户数）</p>
          <div id="main9" class="partfifth-content"></div>
        </div>
         <div class="chart-partThree" v-if="title=='综合信息统计表'">
          <p class="partone-title"><i class="iconfont icon-bar"></i>历史欠费分析（欠费金额）</p>
          <div id="main10" class="partfifth-content"></div>
        </div>
     </div>
  </div>
</template>

<script>
var echarts = require("echarts");
export default {
  name: "chart",
  data() {
    return {
      title: "",
      dateincome: "",
      yearincome: "",
      company: "",
      dps: "",
      maplist: [],
      datalist: [],
      maptitle: "",
      linelist: [],
      sugarlist: [],
      thisyear: [],
      yestyear: [],
      datelist: [],
      moneylist: [],
      radius2title: "",
      tglist: [],
      dwlist: [],
      cclist: [],
      sglist: [],
      series3: [],
      yearnum: [
        "2010-2011",
        "2011-2012",
        "2012-2013",
        "2013-2014",
        "2014-2015",
        "2015-2016",
        "2016-2017",
        "2017-2018",
        "2018-2019",
        "2019-2020",
        "2020-2021",
        "2021-2022",
        "2022-2023"
      ],
      smsyear: "",
      startdate:'',
      enddate:'',
      n:0,
      tablelist1:[],
      tablelist2:[]
    };
  },
  mounted() {
    this.$dialog.loading.close();
    this.title = sessionStorage.type;
    this.company = sessionStorage.company;
    if (this.title == "每日收费统计表") {
      this.getNowFormatDate();
      this.gettitileData(this.company, "每日收费统计表0");
      this.gettitileData(this.company, "每日收费统计表1");
      this.gettitileData(this.company, "每日收费统计表2");
      this.gettitileData(this.company, "每日收费统计表3");
      this.gettitileData(this.company, "每日收费统计表4");
      this.gettitileData(this.company, "每日收费统计表5");
    } else if (this.title == "各年度面积统计") {
      this.smsyear = new Date().getFullYear() + "-" + (new Date().getFullYear() + 1);
      this.gettitileData(this.company, "各年度面积统计0");
      this.gettitileData(this.company, "各年度面积统计1");
      this.gettitileData(this.company, "各年度面积统计2");
    } else if (this.title == "综合信息统计表") {
      this.gettitileData(this.company, "综合信息统计表0");
    }
    //this.gettitileData(this.company, this.dps);
  },
  methods: {
    changeDate(){
      //阻止初始化加载
      this.n++;
      if(this.n>2){
        this.gettitileData(this.company, "每日收费统计表0");
        this.gettitileData(this.company, "每日收费统计表1");
        this.gettitileData(this.company, "每日收费统计表2");
        this.gettitileData(this.company, "每日收费统计表3");
        this.gettitileData(this.company, "每日收费统计表4");
        this.gettitileData(this.company, "每日收费统计表5");
      }
    },
    getNowFormatDate() {
        var date = new Date();
        var seperator1 = "-";
        var seperator2 = ":";
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
        this.startdate = currentdate;
        this.enddate = currentdate;
    },
    changeyear() {
      if (this.smsyear.slice(0, 4) > new Date().getFullYear()) {
        this.$dialog.alert({ mes: "查询的年度不能超过当前年度" });
        return;
      }

      this.gettitileData(this.company, "各年度面积统计0");
      this.gettitileData(this.company, "各年度面积统计1");
      this.gettitileData(this.company, "各年度面积统计2");
    },
    gettitileData(company, dps) {
      //当日收入总额、当年累计收入
      let data = {
        method: "WarmReortForBI",
        querymode: dps,
        company: company,
        type: 0,
        ChargeYear: this.smsyear,
        BeginDate:this.startdate,
        EndDate:this.enddate
      };

      this.$dialog.loading.open("稍等片刻...");
      this.axios
        .post("https://qy.heatingpay.com/handler/commonservice.ashx", data)
        .then(res => {
          this.datalist = [];
          if (dps == "每日收费统计表0") {
            this.dateincome = '';
            this.yearincome = '';
            this.dateincome = res.Data[0].当日收入总额;
            this.yearincome = res.Data[0].当年累计收入;
          } else if (dps == "每日收费统计表1") {
            this.tablelist1 = res.Data;
            //使用饼图
            this.maplist = [];
            for (let i = 0; i < res.Data.length; i++) {
              this.maplist.push(res.Data[i].年度+'('+(res.Data[i].金额/10000).toFixed(2)+')');
              let mm = new Object();
              mm["value"] = res.Data[i].金额;
              mm["name"] = res.Data[i].年度+'('+(res.Data[i].金额/10000).toFixed(2)+')';
              this.datalist.push(mm);
            }
            this.radius("main1");
          } else if (dps == "每日收费统计表2") {
            this.tablelist2 = res.Data;
            //使用饼图
             this.maplist = [];
            for (let i = 0; i < res.Data.length; i++) {
              this.maplist.push(res.Data[i].结算方式+'('+(res.Data[i].金额/10000).toFixed(2)+')');
              let mm = new Object();
              mm["value"] = res.Data[i].金额;
              mm["name"] = res.Data[i].结算方式+'('+(res.Data[i].金额/10000).toFixed(2)+')';
              this.datalist.push(mm);
            }
            this.radius("main2");
          } else if (dps == "每日收费统计表3") {
            //使用柱状图

            var chart3Height = document.getElementById("main3");

            if (res.Data.length > 5) {
              chart3Height.style.height = res.Data.length * 33 + "px";
            } else {
              chart3Height.style.height = res.Data.length * 32 + 60 + "px";
            }

            this.linelist = [];
            this.thisyear = [];
            this.yestyear = [];
            for (let i = 0; i < res.Data.length; i++) {
              this.linelist.push(res.Data[i].分部);
              this.thisyear.push((res.Data[i].当年金额/10000).toFixed(2));
              this.yestyear.push((res.Data[i].陈欠金额/10000).toFixed(2));
            }

            this.series3 = [
              {
                name: "当年金额",
                type: "bar",
                stack: "总量",
                label: {
                  normal: {
                    show: false,
                    position: "insideRight"
                  }
                },
                data: this.thisyear
              },
              {
                name: "陈欠金额",
                type: "bar",
                stack: "总量",
                label: {
                  normal: {
                    show: false,
                    position: "insideRight"
                  }
                },
                data: this.yestyear
              }
            ];

            this.pillar("main3");
          } else if (dps == "每日收费统计表4") {
            //使用柱状图
            this.datelist = [];
            this.moneylist = [];
            for (let i = 0; i < res.Data.length; i++) {
              this.datelist.push(res.Data[i].日期);
              this.moneylist.push((res.Data[i].金额/10000).toFixed(2));
            }
            this.pillar2();
          } else if (dps == "每日收费统计表5") {
            this.$dialog.loading.close();
            //使用柱状图
            this.maplist = [];
            this.datalist = [];
            this.maplist = ["已收", "应交"];
            let A = res.Data[0];
            this.datalist = [
              { value: A.已收, name: "已收" },
              { value: A.应交 - A.已收, name: "未收" }
            ];
            this.radius2title = "本年收费完成率";
            this.radius2("main5");
          } else if (dps == "各年度面积统计0") {
            //使用柱状图
            this.maplist = [];
            this.datalist = [];
            this.maplist = ["实供面积", "停供面积", "拆迁面积", "断网面积"];
            let A = res.Data[0];
            this.datalist = [
              { value: A.实供面积, name: "实供面积" },
              { value: A.停供面积, name: "停供面积" },
              { value: A.拆迁面积, name: "拆迁面积" },
              { value: A.断网面积, name: "断网面积" }
            ];
            this.radius2title = "面积类别";
            this.radius2("main6");
          } else if (dps == "各年度面积统计1") {
            this.$dialog.loading.close();
            //使用柱状图
            this.maplist = [];
            this.maplist = ["实供面积", "停供面积", "拆迁面积", "断网面积"];
            this.tglist = [];
            this.cclist = [];
            this.dwlist = [];
            this.sglist = [];
            this.datelist = [];
            for (let i = 0; i < res.Data.length; i++) {
              this.datelist.push(res.Data[i].年度);
              this.tglist.push(res.Data[i].停供面积);
              this.cclist.push(res.Data[i].拆迁面积);
              this.dwlist.push(res.Data[i].断网面积);
              this.sglist.push(res.Data[i].实供面积);
            }
            this.pillar3("main7");
          } else if (dps == "各年度面积统计2") {
            //使用柱状图

            var chart3Height = document.getElementById("main8");

            if (res.Data.length > 5) {
              chart3Height.style.height = res.Data.length * 33 + "px";
            } else {
              chart3Height.style.height = res.Data.length * 32 + 60 + "px";
            }

            let arrA = new Array();
            let arrB = new Array();
            let arrC = new Array();
            let arrD = new Array();
            this.linelist = [];

            for (let i = 0; i < res.Data.length; i++) {
              this.linelist.push(res.Data[i].分部);
              arrA.push((res.Data[i].停供面积/1000000).toFixed(2));
              arrB.push((res.Data[i].实供面积/1000000).toFixed(2));
              arrC.push((res.Data[i].拆迁面积/1000000).toFixed(2));
              arrD.push((res.Data[i].断网面积/1000000).toFixed(2));
            }

            this.series3 = [
              {
                name: "实供面积",
                type: "bar",
                stack: "总量",
                label: {
                  normal: {
                    show: false,
                    position: "insideRight"
                  }
                },
                data: arrB
              },
              {
                name: "停供面积",
                type: "bar",
                stack: "总量",
                label: {
                  normal: {
                    show: false,
                    position: "insideRight"
                  }
                },
                data: arrA
              },
              {
                name: "拆迁面积",
                type: "bar",
                stack: "总量",
                label: {
                  normal: {
                    show: false,
                    position: "insideRight"
                  }
                },
                data: arrC
              },
              {
                name: "断网面积",
                type: "bar",
                stack: "总量",
                label: {
                  normal: {
                    show: false,
                    position: "insideRight"
                  }
                },
                data: arrD
              }
            ];

            this.pillar("main8");
          } else if (dps == "综合信息统计表0") {
            this.$dialog.loading.close();
            //使用柱状图
            for (let i = 0; i < res.Data.length; i++) {
              this.linelist.push(res.Data[i].年度);
              this.datalist.push(res.Data[i].欠费户数);
              this.moneylist.push(res.Data[i].欠费金额);
            }
            this.pillar4('main9');
            this.pillar4('main10')
          } 
        });
    },
    radius(e) {
      //饼图
      var myChart = echarts.init(document.getElementById(e));
      myChart.clear();
      myChart.resize();
      myChart.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          x: "left",
          data: this.maplist,
          show: true,
          center: ['70%', '40%'],
        },
        series: [
          {
            name: this.maptitle,
            type: "pie",
            radius: ["60%", "80%"],
            center: ['70%', '45%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center"
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "14",
                  fontWeight: "bold"
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: this.datalist
          }
        ]
      });
    },
    pillar(v) {
      //柱状图
      if (v == "main3") {
        this.sugarlist = ["当年金额", "陈欠金额"];
      } else if (v == "main8") {
        this.sugarlist = ["停供面积", "实供面积", "拆迁面积", "断网面积"];
      }

      var myChart2 = echarts.init(document.getElementById(v));
      myChart2.clear();
      myChart2.resize();
      myChart2.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: this.sugarlist,
          show: false
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "value"
        },
        yAxis: {
          type: "category",
          data: this.linelist
        },
        series: this.series3
      });
    },
    pillar2() {
      var myChart3 = echarts.init(document.getElementById("main4"));
      myChart3.clear();
      myChart3.resize();
      myChart3.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        legend: {
          data: ["金额"],
          show: false
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: "category",
          data: this.datelist
        },
        series: [
          {
            name: "金额",
            type: "bar",
            data: this.moneylist
          }
        ]
      });
    },
    radius2(k, p) {
      var myChart = echarts.init(document.getElementById(k));
      myChart.clear();
      myChart.resize();
      myChart.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: this.maplist,
          show: p
        },
        series: [
          {
            name: this.radius2title,
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: this.datalist,
            label: {
              normal: {
                formatter: " {b}  {per|{d}%}  ",
                backgroundColor: "#eee",
                borderColor: "#aaa",
                borderWidth: 1,
                borderRadius: 4,
                // shadowBlur:3,
                // shadowOffsetX: 2,
                // shadowOffsetY: 2,
                // shadowColor: '#999',
                // padding: [0, 7],
                rich: {
                  a: {
                    color: "#999",
                    lineHeight: 22,
                    align: "center"
                  },
                  // abg: {
                  //     backgroundColor: '#333',
                  //     width: '100%',
                  //     align: 'right',
                  //     height: 22,
                  //     borderRadius: [4, 4, 0, 0]
                  // },
                  hr: {
                    borderColor: "#aaa",
                    width: "100%",
                    borderWidth: 0.5,
                    height: 0
                  },
                  b: {
                    fontSize: 16,
                    lineHeight: 33
                  },
                  per: {
                    color: "#eee",
                    backgroundColor: "#334455",
                    padding: [2, 4],
                    borderRadius: 2
                  }
                }
              }
            },
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      });
    },
    pillar3(s) {
      var myChart4 = echarts.init(document.getElementById(s));
      myChart4.clear();
      myChart4.resize();
      myChart4.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: this.maplist,
          show: false
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: this.datelist,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "实供面积",
            type: "bar",
            stack: "总量",
            label: {
              normal: {
                show: false,
                position: "insideRight"
              }
            },
            data: this.sglist
          },
          {
            name: "停供面积",
            type: "bar",
            stack: "总量",
            label: {
              normal: {
                show: false,
                position: "insideRight"
              }
            },
            data: this.tglist
          },
          {
            name: "拆迁面积",
            type: "bar",
            stack: "总量",
            label: {
              normal: {
                show: false,
                position: "insideRight"
              }
            },
            data: this.cclist
          },
          {
            name: "断网面积",
            type: "bar",
            stack: "总量",
            label: {
              normal: {
                show: false,
                position: "insideRight"
              }
            },
            data: this.dwlist
          }
        ]
      });
    },
    pillar4(s) {
      
      if(s == 'main9'){
        this.sugarlist = this.datalist;
        this.radius2title = '欠费户数';
      }else if(s == 'main10'){
        this.sugarlist = this.moneylist;
        this.radius2title = '欠费金额';
      }


      var myChart5 = echarts.init(document.getElementById(s));
      myChart5.clear();
      myChart5.resize();
      myChart5.setOption({
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data:  this.linelist,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: this.radius2title,
            type: "bar",
            barWidth: "60%",
            data: this.sugarlist
          }
        ]
      });
    }
  },
  created() {}
};
</script>

<style>

.contain {
  padding: 10px;
  background-color: #fff;
}
.dateTitle {
  width: 100%;
}
.dateTitle div {
  height: 60px;
  background: #f2f2f2;
  border-radius: 5px;
  text-align: center;
  box-shadow: 0 3px 0px #cccccc;
}
.dateTitle h3 {
  font-size: 15px;
  font-weight: normal;
  margin-top: 10px;
  color: #606060;
}
.dateTitle p {
  color: #ea461f;
  font-size: 13px;
  margin-top: 5px;
  font-weight: bold;
}
.contain-a {
  width: 100%;
  height: 36px;
  line-height: 36px;
  text-align: center;
  background: #2298f0;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
}
.contain-b {
  width: 100%;
  height: 2px;
  background: #2298f0;
  margin: 2px 0 12px 0;
}
.chart-partOne {
  width: 100%;
  background: #f5f5f5;
  overflow: hidden;
  margin-top: 20px;
}
.partone-title {
  font-size: 13px;
  margin: 10px 0 0 10px;
  color: #666;
  vertical-align: middle;
}
.partone-title i {
  margin-right: 5px;
  vertical-align: middle;
}
.partone-bottom {
  width: 50%;
  float: left;
  text-align: center;
  margin: -10px 0 10px 0;
}
.partone-content {
  width: 98%;
  height: 150px;
  float: right;
  margin-top:10px
}
.chart-partTwo {
  width: 100%;
  background: #f5f5f5;
  overflow: hidden;
  margin-top: 20px;
  padding-bottom: 20px
}
.parttwo-content {
  width: 100%;
  margin-top: -40px;
}
.chart-partThree {
  width: 100%;
  background: #f5f5f5;
  overflow: hidden;
  margin-top: 20px;
  padding-bottom: 20px
}
.partthree-content {
  width: 100%;
  height: 800px;
  margin-top: -40px;
}
.chart-partFouth {
  width: 100%;
  background: #f5f5f5;
  overflow: hidden;
  margin-top: 10px;
}
.partfouth-content {
  width: 100%;
  height: 200px;
}
.chart-partFifth {
  width: 100%;
  background: #f5f5f5;
  overflow: hidden;
  margin-top: 20px;
}
.partfifth-content {
  width: 100%;
  height: 200px;
  margin-top: -40px;
}
.chart-year {
  padding: 10px;
  font-size: 13px;
  color: #ea461f;
}
.chart-year select {
  border: 0;
  color: #ea461f;
  width: 70%;
}
.dailyStyle{
  text-align: center !important;
  width: 47% !important;
  display: inline-block;
}
.dailyMain{
  font-size: 15px;
  padding-bottom: 10px
}
.partone-table{
  width:50%;
  float: left;
}
.partone-table table{
  border-collapse:collapse;
  margin:20px 0 0 0;
  width: 160px
}
.partone-table th,.partone-table td{
  padding: 10px;
  text-align:center
}
.partone-table td{
  border: 1px solid #5a5a5a;
  background: #fff;
}
.partone-table th{
  font-weight: bold;
  background: #5a5a5a;
  color: #fff;
  border: 1px solid #5a5a5a;
}
.dw{
  width:100%;
  margin-top:10px;
  display: block
}
</style>
